<template>
<div>
    <Button type="primary" @click="addTopMenu">添加顶级菜单</Button>
    <Divider />
    <div class="tree well">
        <wl-tree @channel="channel" :tree-data="treeData"></wl-tree>
    </div>
    <add-edit :show="model1" :pid="pid" :id="id" :pid_name="pid_name" @cancelShow="modelCancel"></add-edit>
</div>
</template>

<script>
import WlTree from '_c/tree'
import treeData from '@/mock/data/tree-data.js'
import AddEdit from './components/add-edit'
import { permissionCategoryList } from '@/api/auth'

export default {
  components: {
    WlTree,
    AddEdit
  },
  data () {
    return {
      treeData: treeData,
      model1: false,
      id: 0,
      pid: 0,
      pid_name: ''
    }
  },
  mounted () {
    this.getMenuList()
  },
  methods: {
    channel (item, action) {
      if (action === 'add') {
        this.model1 = true
        this.pid = item.id
        this.id = 0
        this.pid_name = item.title
      } else if (action === 'edit') {
        this.model1 = true
        this.pid = 0
        this.id = item.id
        this.pid_name = item.title
      } else {
        // TODO调用删除接口
      }
    },
    getMenuList () {
      permissionCategoryList().then(ret => {
        if (ret.data.errcode === 1001) {
          this.treeData = ret.data.data
        }
      })
    },
    addTopMenu () {
      this.model1 = true
      this.pid = 0
      this.id = 0
      this.pid_name = '顶级菜单'
    },
    modelCancel () {
      console.log('333')
      this.model1 = false
      this.getMenuList()
    }
  }
}
</script>

<style scoped>

</style>
